<template>
	<!-- 首页 我的 测本约车详情页面有使用 主要作用是用于滑动显示透明头部 -->
	<view>
		<cz-nav :offSet="offsetTop">
			<a-nabbar :is-back="isBack" :name="title"/>
		</cz-nav>
		<view class="title-box u-position-relative">
			<item-image :img="backgroundImage" :show-loading="false" :height="height" width="100vw" mode="widthFix" radius="0" v-if="backgroundImage"></item-image>
			<view class="u-position-absolute header-content u-flex u-flex-1">
				<slot name="content">
				</slot>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"indexHeader",
		props: {
			//标题
			title: {
				type: String,
				default: ''
			},
			//当前滚动条位置
			offsetTop:{
				type:Number,
				default:0
			},
			//背景图
			bgImg: {
				type:String,
				default:""
			},
			//高度
			height:{
				type:[String,Number],
				default:320
			},
			//是否显示返回显示按钮
			isBack:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			backgroundImage() {
				return this.bgImg || `${this.aliosCdn}/larp/issue-index-${this.currentTheme}/headerBg.png` 
			}
		},
	}
</script>

<style lang="scss" scoped>

.top{
	left: 0;
	top: 0;
	right: 0;
}
.title-box{
	@extend .top;
	.header-content{
		@extend .top;
		bottom: 0;
	}
}
</style>
